<template>
	<div style="width: 1200px;margin: 0 auto">
		<el-row :gutter="400" >
			<el-col :span="12"><div class="left w-790px h-460px bg-bottom" /> </el-col>
			<el-col :span="12"><div class="w-410px h-504px">
				<el-card class="login" shadow="never">
					<div class="login-top">
						<h3 class="title">看动漫？来对了</h3>
					</div>
					<div class="h-300px">
						<el-form
							ref="ruleFormRef"
							:rules="rules"
							label-position="top"
							:model="state.loginFrom"
							label-width="120px"
						>
							<el-form-item label="账号" prop="username">
								<el-input v-model="state.loginFrom.username" />
							</el-form-item>
							<el-form-item label="密码" prop="password">
								<el-input show-password v-model="state.loginFrom.password" />
							</el-form-item>

							<el-form-item>
								<el-button
									@click="submitForm(ruleFormRef)"
									type="primary"
									class="sure-btn"
								>登录</el-button
								>
							</el-form-item>
						</el-form>
					</div>
					<div>
						<el-link href="/register" target="_blank"
						>还没账号？ 我要注册</el-link
						>
					</div>
				</el-card>
			</div>
			</el-col>
		</el-row>
	</div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
const router = useRouter()
const UserLogin = userLogin()
const ruleFormRef = ref<FormInstance>()
import type { FormInstance, FormRules } from 'element-plus'
import { userLogin } from '~/stores/userLogin'

const state = reactive({
	loginFrom: {
		username: '',
		password: '',
	},
})
const rules = reactive<FormRules>({
	username: [
		{
			required: true,
			message: '账号不能为空',
			trigger: 'change',
		},
	],
	password: [
		{
			required: true,
			message: '密码不能为空',
			trigger: 'change',
		},
	],
})

/**
 * 登录提交
 * @param formEl
 */
const submitForm = async (formEl: FormInstance | undefined) => {
	if (!formEl) return
	await formEl.validate((valid, fields) => {
		if (valid) {
			http.post('/user/login', state.loginFrom).then((res) => {
				UserLogin.token = res.data.token
				UserLogin.isLogin = true
				toast.success('登录成功')
				router.push('/')
			})
		}
	})
}
</script>

<style scoped>
.left {
	background-image: url('/public/img/78d51e44-cb7f-4c2b-8053-0d6f9e670be8.jpg');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}

.login {
	padding-top: 30px;
	width: 410px;
	height: 459px;
}
.login-top {
	height: 80px;
	width: 100%;
}
.title {
	color: #d69ab1;
	font-size: 22px;
	font-weight: 500;
	line-height: 30px;
	text-align: center;
}
.sure-btn {
	background: linear-gradient(90deg, #e1a5a5, #b6e6e6);
	border-radius: 8px;
	color: #fff;
	cursor: pointer;
	font-size: 16px;
	font-weight: 500;
	line-height: 48px;
	padding: 0;
	transition: all 0.2s linear;
	width: 100%;
}
</style>
